<template>
  <div>
    <!-- 儿子组件 -->
    <!-- <Child>
      <!-- 默认插槽：一般只有一个 -->
      <!-- <template>
        <h1>我是祖国的花骨朵</h1>
      </template>
      <!-- 具名插槽:可以有多个  slot="keng" 等同于  #keng -->
      <!-- <template #keng>
        <a href="http://www.baidu.com">百度</a>
      </template> -->
    <!-- </Child> -->
    <!-- <hr /> -->
     <el-button type="primary">12313</el-button>
      <!-- data:表格要展示的数据，一定是数组 -->
     <el-table :data="list" style="width: 100%" border>
        <el-table-column prop="id" label="id" width="80" align="center"></el-table-column>
        <el-table-column prop="title" label="标题" width="width"></el-table-column>
        <el-table-column label="业务完成情况" width="width">
            <!-- 作用域插槽 -->
            <template slot-scope="{row,$index}">
                  <el-button type="primary">{{row}}---{{$index}}</el-button>
            </template>
        </el-table-column>
     </el-table>
  </div>
</template>

<script>
import Child from "./Child";
export default {
  name: "Slot",
  data() {
    return {
      list: [
        { id: 1, title: "吃饭", done: 66 },
        { id: 2, title: "睡觉", done: 99},
        { id: 3, title: "打豆豆", done: 88 },
        { id: 4, title: "烫头", done: 77 },
        { id: 5, title: "喝酒", done: 55 },
      ],
    };
  },
  components: {
    Child,
  },
};
</script>

<style scoped>
hr {
  background: black;
}
</style>
